<template >
    <div class="container-fluid container-med2" style="width:1200px; ">
      <el-form style="width: 100%;height:100%;margin-top: 10px"  >  
          <h1>{{form.title}}</h1>
        <div style="margin-top: 30px"> <b>实验名称: </b>
          <el-input
            autosize
            placeholder="此处为是实验名称，学生无法修改"
            v-model="form.title"
            :disabled="true" style="width: 70%;"> <!--{{form.title}}-->
          </el-input>
        </div>
        <div style="margin-top: 10px" >
        <b>实验目的: </b>
          <el-input
            autosize
            placeholder="此处为是实验目的，学生无法修改"
            v-model="form.purpose"
            :disabled="true" style="width: 70%"><!--{{form.title}}-->
          </el-input>
        </div>
        <div style="margin-top: 10px" >
        <b>实验内容: </b>
          <el-input
            autosize
            placeholder="此处为是实验内容，学生无法修改"
            v-model="form.content"
            :disabled="true" style="width: 70%"><!--{{form.title}}-->
          </el-input>
        </div>
        <div v-for="(item,index) in stepData">
          <div style="margin-top: 10px" >
          <b>实验步骤{{index+1}}: </b>
            <el-input
              autosize
              placeholder="此处为是实验步骤，学生无法修改"
              :value=item
              :disabled="true" style="width: 70%"><!--{{form.title}}-->
            </el-input>
          </div>
          <div style="margin-top: 10px">
          <b>回答问题: </b>
          <el-input
            placeholder="请输入内容"
            v-model=value[index]
            style="width: 70%" ><!--{{form.title}}-->
          </el-input>
          </div>
        </div>
      </el-form>
        <div class="block">
          <span class="wrapper">
            <el-button type="success"  @click="open1">提交</el-button>
            <el-button type="danger" @click="back">返回</el-button>
          </span>
        </div>  
    </div>
  </div>
</template>


<script>
 import axios from 'axios'
  export default {
  name: 'app',
  data () {
    return {
        value:[],
        stepData :[],
        title:this.$route.query.title,
        form: {
            title:'',
            purpose: '',
            content: '',
            step:'',
            beginDate: '',
            endBate: '',
            desc: ''
        },

 }
  },
    methods: {

      open1() {
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
          var params = new URLSearchParams();
          params.append("account",this.$store.state.user.account);
          params.append("title",this.form.title);
          params.append("answer",this.value)
          var _this = this
          axios.post('/user/commitEx',params).then(function(res){
            _this.$router.push({path: 'student'})
          })
          // console.log(this.value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上传'
          });          
        });

      },
    open2() {
      console.log(this.$store.state.user)
        this.$alert('已成功保存', '保存进度', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
        this.$router.go(-1)
      },
     back() {
        this.$alert('返回首页', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`,
              
            });
            this.$router.go(-1)
          }
        });
      }


    },
    mounted:function(){
      var params = new URLSearchParams();
      params.append('title',this.$route.query.title)
      var _this = this;
      axios.post('/experiment/getExperiment',params).then(function(res){
        res.data.getEx.startDate=res.data.getEx.startDate.substring(0,10);
        res.data.getEx.endDate=res.data.getEx.endDate.substring(0,10);
        res.data.getEx.step=res.data.getEx.step[0].split(',')
        _this.form.title=res.data.getEx.title;
        _this.form.purpose=res.data.getEx.purpose;
        _this.form.content = res.data.getEx.content;
        _this.stepData= res.data.getEx.step;
        _this.form.startDate = res.data.getEx.startDate;
        _this.form.endDate = res.data.getEx.endDate;
        _this.form.desc = res.data.getEx.remark;
      })
    }

}
</script>

<style scoped>
 .container-med2{
    margin-top: 160px;
    margin: 0 auto ;
    -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
    box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
  }
  .block{
    margin-top: 20px;
    padding-bottom: 30px;
  }


  

</style>